<template>
<div class="content">
  <van-swipe class="my-swipe" :autoplay="4000" indicator-color="white">
    <van-swipe-item v-for="item in currentData.photos">
      <div class="imgDiv" :style="{background: 'url(' + setPreviewUrl(item) + ')', backgroundSize:'cover', backgroundPosition: 'center'}"></div>
    </van-swipe-item>
  </van-swipe>
  <div v-if="belongTo == 'ground'">
    <van-row class="mt10">
      <van-col span="8" class="navIcon" v-for="item in topNavData" @click.native="jump(item)">
        <div class="icon">
          <van-icon :name="item.icon" />
        </div>
        <p class="mt10">{{item.title}}</p>
      </van-col>
    </van-row>
    <van-divider class="middleDivder" />
    <van-row>
      <van-col :span="setSpan()" v-for="item in statisticsData">
        <div class="statistics">
          <div class="mt4">{{item.title}}</div>
          <div class="mt4">{{item.num}}</div>
        </div>
      </van-col>
    </van-row>
  </div>
  <div v-if="belongTo == 'project'">
    <p class="detailTitle" @click="handleDetail">{{currentTitle}}详细介绍</p>
  </div>
  <div class="divder"></div>
  <div class="activityList mt10">
    <van-row class="px12 pb6">
      <van-col span="12" class="text-left title">志愿活动</van-col>
      <van-col span="12" class="text-right btn" @click="showMoreActi">查看更多</van-col>
    </van-row>
    <div class="dataList">
      <Activity :isShowSearch="false" ref="activRef"></Activity>
    </div>
  </div>
</div>
</template>

<script>
import Activity from '@/views/activities/index.vue'
import qs from 'qs'
export default {
  name: "Home",
  components: {
    Activity
  },
  data() {
    return {
      currentData: {},
      belongTo: 'ground',
      statisticsData: [],
      currentTitle: "",
      topNavData: [{
        title: '详情介绍',
        icon: 'more',
        path: '/ground/detail',
      }, {
        title: '实践资讯',
        path: '/info',
        icon: 'coupon'
      }, {
        title: '品牌项目',
        path: '/project',
        icon: 'award'
      }]
    };
  },
  created() {
    this.initShow()
  },
  mounted() {
    this.$refs.activRef.onRefresh()
  },
  methods: {
    initShow() {
      let me = this;
      me.belongTo = me.$route.query.groundId ? 'ground' : 'project';
      if (me.belongTo == 'ground') {
        me.getGroundData()
      } else {
        me.getProjectData()
      }
    },
    getGroundData() {
      let me = this;
      me.$api.getGroundDetail({
        params: {
          groundId: me.$route.query.groundId
        }
      }).then(res => {
        me.currentData = res;
        me.currentTitle = res.groundName;
        me.$api.getGroundChildCount({
          params: {
            groundId: me.$route.query.groundId
          }
        }).then(res => {
          let actiArr = [{
            title: '活动数据',
            num: res.activityCount
          }];
          let groundArr = res.groundCount.filter(x => Number(x.groundType) > Number(me.currentData.groundType)).map(item => {
            return Object.assign({}, {
              title: item.groundTypeName,
              num: item.total
            });
          });
          let arr = groundArr.concat(actiArr);
          me.statisticsData = arr;
        })
      })
    },
    getProjectData() {
      let me = this;
      me.$api.getProjectDetail(qs.stringify({
        id: me.$route.query.projectId
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(res => {
        me.currentData = res;
        me.currentTitle = res.projectName;

      }).catch(err => {
        me.$toast(err)
      })
    },
    showMoreActi() {
      let obj = {};
      this.belongTo == 'ground' ? obj = {
        groundId: this.currentData.groundId
      } : obj = {
        projectId: this.currentData.id
      }
      this.$router.push({
        path: 'activities',
        query: obj
      });
    },
    setPreviewUrl(val) {
      return process.env.VUE_APP_BASE_URL + 'admin/upms/file/download?filename=' + val
    },
    handleDetail() {
      this.$router.push({
        path: '/project/detail',
        query: {
          id: this.$route.query.projectId,
          title: this.currentTitle
        }
      });
    },
    jump(item) {
      let me = this;
      this.$router.push({
        path: item.path,
        query: {
          id: this.currentData.groundId,
          title: this.currentData.groundName
        }
      });
    },
    setSpan() {
      return 24 / this.statisticsData.length
      // let str = '24';
      // if(this.statisticsData.length == 1){
      //   str = '24'
      // }else if(this.statisticsData.length == 2){
      //
      // }
    }
  },
};
</script>

<style lang="scss" scoped>
.detailTitle {
    text-align: center;
    margin: 0.4rem auto;
    color: #409eff;
}
.content {
    height: 100%;
    overflow-y: scroll;
}
.navIcon {
    text-align: center;
    .icon {
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        line-height: 1.88rem;
        vertical-align: middle;
        // background-color: #eb4446;
        border: 0.05rem solid #eb4446;
        color: #eb4446;
        border-radius: 50%;
    }
}
.num {
    padding: 0 1rem 0.2rem;
}
.statistics {
    // width: 22%;
    text-align: center;
    height: 1rem;
    font-size: 0.35rem;
    color: #f34b47;

}
.statistics:not(:nth-child(4n)) {
    // margin-right: calc(12% / 3);
}
.activityList {
    .title {
        font-size: 0.4rem;
    }
    .btn {
        font-size: 0.35rem;
        color: #999999;
    }
}
.divder {
    width: 100%;
    height: 0.2rem;
    background-color: #f5f5f5;
}
</style>
